<template>
	<!-- 电梯故障数量统计 -->
	<div class="statisBox heightMax publicbox" v-loading='loading'>
		<div class="leftBox" ref='echarts'>
		</div>
		<div class="rightBox">
			<div class="rightBoxTop">
				<div class="listName">
					<i></i><span class="font14">电梯故障率排名</span>
				</div>
				<div class="rightBoxTopScroll">
					<vueScroll>
						<div class="listItem" v-for="(item,index) in listItemText" :key='index'>
							<img :src="imgArr[index]" alt="">
							<div class="itemSon">
								<div>{{item.name}}</div>
								<div><span class="redText">{{item.num}}</span>次</div>
							</div>
						</div>
					</vueScroll>
				</div>
			</div>
			<div class="rightBoxBottom">
				<div class="listName">
					<i></i><span class="font14">故障统计</span>
				</div>
				<div ref='echartsPie' class="pie">

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
	} from "@/common.js";
	export default {
		mounted() {
			this.getList()
		},
		data() {
			return {
				loading: true,
				lineDataName: [],
				lineData: [],
				alarm: [],
				alarmName: [],
				imgArr: [
					require('../../../assets/paiHangImg/1_1.png'),
					require('../../../assets/paiHangImg/1_2.png'),
					require('../../../assets/paiHangImg/1_3.png'),
					require('../../../assets/paiHangImg/1_4.png'),
					require('../../../assets/paiHangImg/1_5.png'),
					require('../../../assets/paiHangImg/1_6.png'),
					require('../../../assets/paiHangImg/1_7.png'),
					require('../../../assets/paiHangImg/1_8.png'),
					require('../../../assets/paiHangImg/1_9.png'),
					require('../../../assets/paiHangImg/1_10.png'),
				],
				listItemText: []
			}
		},
		methods: {
			getList() {
				axiosGet('/manu/elevator/alarms/statistics/', {}, (res) => {
					this.loading = false
					if (res.code == 0) {
						console.log(res.detail[0].statistics)
						res.detail[0].statistics.map((item) => {
							this.lineDataName.push(item.month)
							this.lineData.push(item.count)
						})
						res.detail[1].alarm.map((item) => {
							this.listItemText.push({
								name: item.code,
								num: item.count
							})
						})
						this.alarm = res.detail[1].alarm.map((item) => {
							item.name = item.code
							item.value = item.count
							return item
						})
						this.alarmName = res.detail[1].alarm.map((item) => {
							return item.code
						})
						this.LeftEcharts()
						this.Pieecharts()
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			Pieecharts() {
				let dom = this.$refs.echartsPie
				let myChart = this.echarts.init(dom)
				let alarm = this.alarm
				let alarmName = this.alarmName
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						x: 'left',
						data: alarmName
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: true,
								textStyle: {
									fontSize: '15',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: alarm
					}]
				})
			},
			LeftEcharts() {
				let dom = this.$refs.echarts
				let myChart = this.echarts.init(dom)
				let lineDataName = this.lineDataName
				let lineData = this.lineData
				// 绘制图表
				myChart.setOption({
					title: {
						text: '电梯故障总计',
						x: 'center',
						y: 'top',
						textAlign: 'left'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						},
					},
					xAxis: [{
						type: 'category',
						boundaryGap: false,
						data: lineDataName //{b}
					}],
					yAxis: [{
						type: 'value',
						axisLabel: {
							formatter: '{value}(次)'
						}
					}],
					series: [{
						name: '次数', //{a0}
						color: ['#409EFF'],
						type: 'line',
						stack: '总量',
						areaStyle: {}, //折现背景
						symbol: 'circle',
						temStyle: {
							normal: {
								color: '#595de4', //折点颜色
								lineStyle: {
									color: '#595de4', //折线颜色
									width: '3'
								}

							},
						},
						data: lineData, //{c0}
					}]
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.statisBox {
		display: flex;
		flex-direction: row;

		.leftBox {
			width: 75%;
			height: 100%;
		}

		.rightBox {
			width: 25%;
			height: 100%;

			.rightBoxTop {
				width: 100%;
				height: 59%;
				margin-bottom: 10px;
				margin-bottom: 1%;
				padding: 5px 10px;
				box-sizing: border-box;

				.listItem {
					display: flex;
					align-items: center;
					padding: 5px;
					box-sizing: border-box;
					border-bottom: 1px solid #f4f5f8;

					.itemSon {
						text-align: left;
					}

					img {
						height: 100%;
						margin-right: 10px;
					}
				}

				.rightBoxTopScroll {
					height: 80%;
					// overflow-y: auto;
				}
			}

			.rightBoxBottom {
				width: 100%;
				height: 40%;

				.pie {
					width: 100%;
					height: 90%;
				}
			}
		}
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;
		margin-bottom: 15px;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}
	}

	.redText {
		font-size: 18px;
		font-weight: 700;
		color: #c23531;
	}
</style>
